<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡</title>
    <style>
        body{
            background: #000;
        }
        section{
            width: 400px;
            height: 400px;
            border: 1px solid #fffce7;
            margin: 10px 0;
        }
        #box div,#box2 div{
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            display: none;
            border-radius: 30px;
            margin-top: 10px;
            color: #fff;
            text-align: center;
            line-height: 300px;
            font-size: 100px;
        }
        #box input,#box2 input{
            width: 100px;
            height: 40px;
            display: inline-block;
            cursor: pointer;
        }
    </style>
</head>
<body>
<section id="box">
    <input type="button" value="按钮1" style="background: hotpink">
    <input type="button" value="按钮2">
    <input type="button" value="按钮3">
    <div style="display: block;border-color: hotpink">1</div>
    <div>2</div>
    <div>3</div>
</section>
<!--<section id="box2">-->
<!--<input type="button" value="按钮1" style="background: hotpink">-->
<!--<input type="button" value="按钮2">-->
<!--<input type="button" value="按钮3">-->
<!--<div style="display: block;border-color: hotpink">1</div>-->
<!--<div>2</div>-->
<!--<div>3</div>-->
<!--</section>-->
</body>
<script>
    //调用传参
    window.onload=function () {
        new Tab('box');
        //   new Tab('box2');
    };
    //属性
    var btns=null;
    var oDiv=null;
    function Tab(id) {
        var _this=this;
        //   console.log(_this);//指tab，调用的对象
        //console.log(this);//指tab，调用的对象
        var  box=document.getElementById(id);
        this.btns=box.getElementsByTagName('input');
        this.oDiv=box.getElementsByTagName('div');
        for(var i=0;i<this.btns.length;i++){
            this.btns[i].index=i;//索引
            this.btns[i].onclick=function(){
                _this.click(this);
                console.log(this);//指当前按的按钮
                console.log(_this);//指tab，调用的对象
            }
        }
    }
    //方法；
    Tab.prototype.click=function(btns) {
        for(var i=0;i<this.oDiv.length;i++){
            this.btns[i].style.background='';//点击后先清除所有的按钮背景
            //     console.log(this);//指tab，调用的对象
            this.oDiv[i].style.display='none';
            this.oDiv[i].style.borderColor='hotpink';
        }
        this.oDiv[btns.index].style.display='block';//this指当前点击的元素按钮
        this.oDiv[btns.index].style.borderColor='hotpink';
        btns.style.background='hotpink';//给当前按钮加背景
    }
</script>
</html>